<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { initWS } from '/src/utils/initWS.js'
import { dataPro_ptp, timeTtype } from '../js/dataPro_Ptp.js'

const ip = `ws://${window.location.host}/ws/`
// const ip = `ws://10.202.1.31:20038/`
const config = {
  path: `${ip}monitor/ptp-info`,
  // path: 'ws://localhost:8080',
  name: 'ptp',
}

let data = ref(null)
const handleWsData = (e) => {
  data.value = dataPro_ptp(JSON.parse(e.data)['ptp-info'])
}
const ws = initWS(config, handleWsData)

// 卸载
onBeforeUnmount(() => {
  if (ws) ws.close()
})

const nameT = (row) => {
  if (row.key == 'time-node') {
    return timeTtype[row.value]
  }

  if (row.key == 'timestamp' || row.key == 'last-time') {
    const date = new Date(row.value)
    return date.toISOString().replace('T', ' ').split('.')[0] // 格式: YYYY-MM-DD HH:mm:ss
  }
  return row.value
}
</script>
<template>
  <div class="equipment-container" v-if="data">
    <div class="top">
      <p>ptp</p>
    </div>

    <div class="showTableEle2">
      <el-table :data="data" border style="width: 40%" show-overflow-tooltip>
        <el-table-column prop="name" label="模块" width="220" />
        <el-table-column prop="value" :formatter="nameT" label="参数" />
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.equipment-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.showTableEle2 {
  margin-bottom: 20px;
  > p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}
::v-deep .el-table .cell {
  padding: 4px 10px;
}
.top {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
</style>
